<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="referrer" content="no-referrer" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css" />
    <link rel="stylesheet" href="./css/mui.min.css" />
    <link rel="stylesheet" href="./css/shi/refurbishment.css" />
    <link rel="stylesheet" href="./font/iconfont.css" />
  </head>
  <body>
    <!-- 顶部 -->
    <div class="top">
      <div class="top-location">
        <div class="top-img"></div>
      </div>
      <div class="top-swiper">
        <div class="swiper-box">
          <!-- 轮播 -->
          <div class="mui-slider">
            <div class="mui-slider-group mui-slider-loop">
              <!--支持循环，需要重复图片节点-->
              <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#"
                  ><img
                    src="https://image7.wbiao.co/mall/d2de415bc15d4d51aae6b155320b98b1.png?x-oss-process=image/resize,m_fill,w_670,h_204/quality,q_90"
                /></a>
              </div>
              <div class="mui-slider-item">
                <a href="#"
                  ><img
                    src="https://image7.wbiao.co/mall/03c5b0686eb041e39f1074b47eb6f087.png?x-oss-process=image/resize,m_fill,w_670,h_204/quality,q_90"
                /></a>
              </div>
              <div class="mui-slider-item">
                <a href="#"
                  ><img
                    src="https://image7.wbiao.co/mall/93c4f3f6c332434c951e27afa0b3e80b.png?x-oss-process=image/resize,m_fill,w_670,h_204/quality,q_90"
                /></a>
              </div>
              <div class="mui-slider-item">
                <a href="#"
                  ><img
                    src="https://image7.wbiao.co/mall/d2de415bc15d4d51aae6b155320b98b1.png?x-oss-process=image/resize,m_fill,w_670,h_204/quality,q_90"
                /></a>
              </div>
              <!--支持循环，需要重复图片节点-->
              <div class="mui-slider-item mui-slider-item-duplicate">
                <a href="#"
                  ><img
                    src="https://image7.wbiao.co/mall/03c5b0686eb041e39f1074b47eb6f087.png?x-oss-process=image/resize,m_fill,w_670,h_204/quality,q_90"
                /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="top-header">
        创立
        <span class="st">9年</span>
        以来，累计为
        <span class="st">400000+人次</span>
        解决各类手表问题
      </div>
      <ul class="item">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 关于名匠 -->
    <div class="home-card">
      <div class="home-card-img"></div>
      <div class="home-container">
        <div class="home-top">
          <div class="top-left">
            <p class="title">维修价目</p>
            <p class="sub">收费公正透明</p>
            <span class="btn">GO</span>
          </div>
          <div class="top-right">
            <div class="right-top">
              <p class="title">故障维修</p>
              <p class="sub">功能失效</p>
              <p class="sub">走时不准</p>
            </div>
            <div class="right-bottom">
              <p class="title">定期保养</p>
              <p class="sub">机芯走油</p>
              <p class="sub">外观清晰</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 领券中心 -->
    <div class="home-tool">
      <ul class="nav">
        <li>
          <div class="nav-list">
            <div class="list-img"></div>
            <span>领券中心</span>
          </div>
        </li>
        <li>
          <div class="nav-list">
            <div class="list-img"></div>
            <span>优秀店铺</span>
          </div>
        </li>
        <li>
          <div class="nav-list">
            <div class="list-img"></div>
            <span>名师列表</span>
          </div>
        </li>
        <li>
          <div class="nav-list">
            <div class="list-img"></div>
            <span>监督申诉</span>
          </div>
        </li>
      </ul>
      <div class="platform">
        <img
          src="https://static.wbiao.co/p/mjwatch/images/new/platform_01.png"
          alt=""
        />
      </div>
    </div>
    <!-- 优质推荐 -->
    <div class="module">
      <div class="module-nav">
        <div class="span active">
          <div class="title">
            优质推荐
            <span class="tag">优惠</span>
          </div>
          <div class="sub">精选寄修门店</div>
        </div>
        <div class="span">
          <div class="title">就近推荐</div>
          <div class="sub">离你最近店铺</div>
        </div>
      </div>
      <div class="module-list">
        <div class="sprite">
          <div class="list-head">
            <div class="head-left">
              <p class="left1">明星店铺</p>
              <p class="left2">为您推荐明星店铺TOP10</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  -->

    <script src="./js/reset.js"></script>
    <script src="./js/mui.min.js"></script>
    <script>
      //获得slider插件对象
      var gallery = mui(".mui-slider");
      gallery.slider({
        interval: 1000, //自动轮播周期，若为0则不自动播放，默认为0；
      });
    </script>
  </body>
</html>
